<template>
  <view class="index">
    <image
      src="/static/index/header.png"
      mode="aspectFill"
      class="header"></image>
    <view class="content">
      <!-- 导航一 -->
      <view class="header-nav flex">
        <image
          src="/static/index/nav-bg.png"
          mode="aspectFill"
          class="nav-bg"></image>
        <view
          class="header-nav-box column-flex-center"
          v-for="(item, index) in navList"
          :key="index"
          @click="goPage(index)">
          <view class="box-pr">
            <image :src="item.img" mode="aspectFit"></image>
            <template v-if="num > 0 && index == 1">
              <view class="po-dge">
                <u-badge
                  type="warning"
                  max="99"
                  bgColor="#DA4334"
                  :value="num"></u-badge>
              </view>
            </template>
          </view>
          <view class="">{{ item.title }}</view>
        </view>
      </view>
      <!-- 导航二 -->
      <view class="nav-wrap">
        <view class="title">生产管理录入</view>
        <view class="wrap flex">
          <view
            class="box column-flex-center"
            v-for="(item, index) in navTwo"
            :key="index"
            @click="goPage2(index)">
            <image :src="item.img" mode="aspectFit"></image>
            <view class="">{{ item.title }}</view>
          </view>
        </view>
      </view>

      <view class="nav-wrap">
        <view class="title">质量管理录入</view>
        <view class="wrap flex">
          <view
            class="box column-flex-center"
            @click="toOnePage(index)"
            v-for="(item, index) in navThree"
            :key="index">
            <image :src="item.img" mode="aspectFit"></image>
            <view class="">{{ item.title }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      num: 0,
      navList: [
        {
          title: "已发起",
          img: "/static/index/1.png",
        },
        {
          title: "待审核",
          img: "/static/index/2.png",
          info: 1,
        },
        {
          title: "已审核",
          img: "/static/index/3.png",
        },
        {
          title: "我收到的",
          img: "/static/index/4.png",
        },
      ],
      navTwo: [
        {
          title: "养殖生管部",
          img: "/static/index/5.png",
        },
        {
          title: "抓鸭运输",
          img: "/static/index/6.png",
        },
        {
          title: "一工段",
          img: "/static/index/7.png",
        },
        {
          title: "副产车间",
          img: "/static/index/8.png",
        },
        {
          title: "四工段",
          img: "/static/index/9.png",
        },
        {
          title: "五工段",
          img: "/static/index/10.png",
        },
      ],
      navThree: [
        {
          title: "一工段",
          img: "/static/index/7.png",
        },
        {
          title: "二工段",
          img: "/static/index/11.png",
        },
        {
          title: "三工段",
          img: "/static/index/12.png",
        },
        {
          title: "四工段",
          img: "/static/index/9.png",
        },
        {
          title: "副产车间",
          img: "/static/index/8.png",
        },
        {
          title: "五工段",
          img: "/static/index/10.png",
        },
      ],
    };
  },
  onShow() {
    uni.getStorageSync("checkAddress") && uni.removeStorageSync("checkAddress");
    // setTimeout(() => {
    if (this.vuex_is_login) {
      this.num = 0;
      this.$api({
        url: "/subscript",
        method: "get",
        data: {},
      }).then((res) => {
        if (res.code === 200) {
          this.num = res.data.pending_approval_num;
        } else {
          this.num = 0;
        }
      });
    }
    // }, 1000);
  },
  computed: {
    ...mapState(["vuex_is_login"]),
  },
  methods: {
    mix_checkLogin() {
      let loginStatus = true;
      if (!this.vuex_is_login) {
        // this.$alert('请您先登录')
        // setTimeout(() => {
        // 	this.toRoute('/login')
        // }, 1000)

        uni.showModal({
          title: "信息提示",
          content: "您尚未登录，是否去登录?",
          confirmText: "确定",
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              this.toRoute("/login");
            }
          },
        });

        loginStatus = false;
      }

      return loginStatus;
    },
    // 质量管理录入
    toOnePage(index) {
      const s = this.mix_checkLogin();
      if (!s) return;
      this.toRoute({
        path: "/quality-assurance",
        query: {
          type: index + 1,
        },
      });
    },
    //点击第一个导航
    goPage(k) {
      const s = this.mix_checkLogin();
      if (!s) return;
      this.toRoute({
        path: "order-list",
        query: {
          status: k + "",
        },
      });
    },
    //导航二
    goPage2(k) {
      const s = this.mix_checkLogin();
      if (!s) return;
      switch (k) {
        case 0:
          this.toRoute("record");
          break;
        case 1:
          this.toRoute("transport");
          break;
        case 2:
          this.toRoute("section");
          break;
        case 3:
          this.toRoute("section3");
          break;
        case 4:
          this.toRoute("section4");
          break;
        default:
          this.toRoute("section5");
          break;
      }
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}

.index {
  width: 100%;
  height: 100%;
  background: #f5f7f9;

  .header {
    width: 100%;
    height: 404upx;
  }

  .content {
    padding: 0 28upx;
    margin-top: -140upx;

    .header-nav {
      height: 212upx;
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 62upx 0 48upx;
      z-index: 1;
      background: #fff;
      margin-bottom: 24upx;
      border-radius: 24upx 24upx 0 0;

      .nav-bg {
        height: 140upx;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 24upx 24upx 0 0;
      }

      .header-nav-box {
        width: 25%;
        text-align: center;
        font-size: 24rpx;
        color: #171a1d;

        .box-pr {
          position: relative;

          .po-dge {
            position: absolute;
            right: -18upx;
            top: -10upx;
          }

          & > image {
            width: 52upx;
            height: 52upx;
            margin-bottom: 30upx;
          }
        }
      }
    }

    .nav-wrap {
      padding: 32upx 30upx 0;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      background: #fff;
      margin-bottom: 24upx;

      .title {
        font-weight: bold;
        font-size: 32rpx;
        color: #000000;
        margin-bottom: 40upx;
      }

      .wrap {
        flex-wrap: wrap;

        .box {
          width: 25%;
          font-size: 24rpx;
          color: #171a1d;
          margin-bottom: 52upx;

          & > image {
            width: 80upx;
            height: 80upx;
            margin-bottom: 24upx;
          }
        }
      }
    }
  }
}
</style>
